<template>
  <div>
    <h1>显示页面</h1>
    借款款项名称:<input type="text" v-model="state.JName" /> 利息:
    <select v-model="state.Lid">
      <option value="">请选择</option>
      <option :value="item.Lid" v-for="item in list">
        {{item.LName*100}}%
      </option>
    </select>
    <input type="button" value="查询" @click="show">
    <table>
      <tr>
        <td>借款款项编号</td>
        <td>借款款项名称</td>
        <td>借款最高金额</td>
        <td>借款最高年限</td>
        <td>利息</td>
        <td>预计月还款金额</td>
        <td>借款款项简介</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in lists">
        <td>{{item.Jid}}</td>
        <td>{{item.JName}}</td>
        <td>{{item.JinE}}</td>
        <td>{{item.NianXian}}</td>
        <td>{{item.LName*100}}%</td>
        <td>{{(item.JinE*item.LName*100/12).toFixed(2)}}CNY</td>
        <td>{{item.JianJie}}</td>
        <td>
          <input type="button" value="删除" @click="del(item.Jid)">
          <input type="button" value="修改" @click="update(item.Jid)">
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

let data: any = reactive({
  state: {
    JName: '',
    Lid: '',
  },
  list: [],
  lists:[]
});

let { state, list,lists } = toRefs(data);

onMounted(() => {
  getData();
  show()
});

const update=(Jid:any)=>{
router.push({
  path:'/update',
  query:{
    Jid:Jid
  }
})
}

const del=(Jid:any)=>{
  const f=confirm('确认删除吗？');
  if(f){
    axios({
      url:'/api/JieKuans/Del',
      method:'get',
      params:{
        Jid:Jid
      }
    })
    .then(res=>{
      if(res.data.data>0){
        alert('删除成功');
        show()
      }
    })
    .catch(err=>{
        alert('删除失败');
    })
  }
}

const show=()=>{
axios({
  url:'/api/JieKuans/Show',
  method:'get',
  params:state.value
})
.then(res=>{
  console.log(res.data);
  lists.value=res.data.data;
  console.log(res.data.data.length);
})
.catch(err=>{
  console.log(err);
  
})
}

const getData = () => {
  axios({
    url: '/api/JieKuans/Xia',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      list.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
